<template>
  <div class="user-panel">
    <header>
      <div class="user-avatar"></div>
      <span class="user-name">匆匆孑然</span>
    </header>
    <main>
      <ul>
        <li>
          <a href="#">Gitee</a>
        </li>
        <li>
          <a href="#">Email</a>
        </li>
      </ul>
    </main>
    <footer></footer>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.user-panel {
  width: 100%;
  display: grid;
  justify-content: center;
  header {
    border-bottom: 1px solid gray;
    width: 100%;
    text-align: center;
    .user-avatar {
      margin: 20px;
      width: 96px;
      height: 96px;
      background: url("../assets/icons/avatar.jpeg") no-repeat center;
      background-size: 96px;
      border-radius: 50%;
      border: 1px solid rgb(123, 181, 248);
    }
  }
  main {
    text-align: center;
    ul {
      padding: 0;
      list-style: none;
      li {
        a {
          text-decoration: none;
        }
      }
    }
  }
}
</style>